window.onload = function() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
x0=20;y0=20;
hmax=500;
xmax=500;
endx=canvas.height-20;
endy=canvas.width-20;
ctx.strokeRect(x0,y0,xmax,hmax);
dx=250;
ctx.beginPath();

ctx.strokeStyle='blue';
ctx.lineWidth=2;
ctx.strokeText('0',x0-15,hmax+x0);
//ctx.strokeText('250',250,hmax+x0+10);
//ctx.strokeText('500',xmax,hmax+x0+10);
//ctx.strokeText('250',x0-18,hmax-240);
//ctx.strokeText('500',x0-18,hmax-480);
ctx.stroke();
// free fall
angle = 45;
var R=1;
var gravity = 9;  // m/ss
var elastic = null;
ctx = canvas.getContext('2d');
ctx.font = "14px Times-Roman";
function start(angle,speed,high)
{
//alert(angle+'-'+speed+'-'+high);
var cursor = null;
var w = canvas.width;
var rad = angle*Math.PI/180;
 vx = Math.cos(rad)*speed;
 vy = Math.sin(rad)*speed;
ctx.strokeStyle='blue';
ctx.lineWidth=1;
/* squarts
ctx.moveTo(i,y0);
ctx.lineTo(i,x0+hmax);
ctx.moveTo(y0,i);
ctx.lineTo(xmax+x0,i);
*/
var yhigh = 520 - high*5;
 parabol = {x:20,y:yhigh};
/*for (parabol.x = 20  ; parabol.x <= 500; parabol.x+=0.1) {
 parabol.x=parabol.x;
 parabol.y = (vy/vx)*(parabol.x-20) - (9,8/(2*vx*vx))*(parabol.x-20) *(parabol.x-20);
 parabol.y = yhigh - parabol.y;
 //alert(parabol.x+'-'+parabol.y+'-'+yhigh);
if(parabol.y > 520){ break;};
ctx.beginPath();
ctx.arc(parabol.x,parabol.y,1.2,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
*/
parabol.x = 20  ;

tid = setInterval(tt, 0);
tangentx=50;
first={x:parabol.x, y:parabol.y};

function tt()
{
 first.x = parabol.x; first.y = parabol.y;
 parabol.y = (vy/vx)*(parabol.x-20) - (9,8/(2*vx*vx))*(parabol.x-20) *(parabol.x-20);
 parabol.y = yhigh - parabol.y;
 parabol.x+=0.3; 
if(parabol.y > 520 || parabol.x > 500){ 
clearTimeout(tid);
flag();
};

ctx.beginPath();
ctx.arc(parabol.x,parabol.y,1.2,0,2*Math.PI);
//tangent
if(parabol.x>tangentx && parabol.x<tangentx+0.3){alert(11);
tangentx+=30; 
k=(parabol.x-first.x)/(parabol.y-first.y);alert(parabol.x);
ctx.moveTo(first.x,first.y);
ctx.lineTo(first.x+150*(parabol.x-first.x),first.y+150*(parabol.y-first.y));
ctx.stroke();
//ctx.lineTo(5,k*5);
}
ctx.closePath();
ctx.fill();

}


}

function flag(){
ctx.fillStyle   = 'red';
ctx.moveTo(parabol.x,parabol.y);
ctx.lineTo(parabol.x, parabol.y-40);
ctx.lineTo(parabol.x+20, parabol.y-30);
ctx.lineTo(parabol.x, parabol.y-20);
ctx.fill();
ctx.stroke();
ctx.fillStyle   = 'black';
}


function showresult(){
showdiv = document.getElementById("showdiv");
showdiv.style.display = "block";
var x0_show = document.getElementById("x0");
 x0_show.innerHTML='0';
var y0_show = document.getElementById("y0");
 y0_show.innerHTML=hRange.slider("value");
var v0x_show = document.getElementById("v0x");
 v0x_show.innerHTML=vx;
var v0y_show = document.getElementById("v0y");
 v0y_show.innerHTML=vy;
var vx_show = document.getElementById("vx");
 vx_show.innerHTML=-vx;
var vy_show = document.getElementById("vy");
 vy_show.innerHTML=vy;
var y = document.getElementById("y");
y.innerHTML=0;
var t = 2*vx/9.8; 
var s = vx*t ;
var x= document.getElementById("x");
 x.innerHTML=s; 
var tfall= document.getElementById("tfall");
 tfall.innerHTML=t;
 

}
button=document.getElementById("button");
button.addEventListener("click", function(){start(cRange.slider("value"),sRange.slider("value"),hRange.slider("value"));
showresult(); }, false);
cleen=document.getElementById("cleen");
cleen.addEventListener("click", function(){ctx.clearRect(x0,y0,xmax,hmax);}, false);
}